<template>
    <div
        class="cashInstUpdate"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <cardComponent pageTitle="特色业务-->现金分期资料修改">
            <template slot="cardBody">
                <div class="formContainer">
                    <!-- 搜索表单模块 -->
                    <el-form
                        class="editForm"
                        ref="editForm"
                        :model="formData"
                        label-position="right"
                        :rules="formRules"
                        size="small"
                        label-width="250px"
                    >
                        <div class="text_center width40">
                            <el-form-item label="账户类别:">
                                <span
                                    class="el-form-item-span"
                                >{{formData.CATEGORY | CATEGORYFitlers(AccountionTYPE_INFO)}}</span>
                            </el-form-item>
                        </div>
                        <div class="text_center width40">
                            <el-form-item label="主卡卡号:">
                                <el-input v-model="cardInfo_3004.CARDNO" disabled></el-input>
                            </el-form-item>
                        </div>
                        <div class="text_center width40">
                            <el-form-item label="申请转入的银行卡号:" prop="OUTCARDNBR">
                                <el-input placeholder="请输入银行卡号" v-model="formData.OUTCARDNBR"></el-input>
                            </el-form-item>
                        </div>
                        <div class="text_center width40">
                            <el-form-item label="申请转入的银行卡持卡人姓名:">
                                <el-input
                                    placeholder="请输入持卡人姓名"
                                    v-model="cardInfo_3004.NAME"
                                    disabled
                                ></el-input>
                            </el-form-item>
                        </div>
                        <div class="text_center width40">
                            <el-form-item label="申请转入的银行行号:" prop="OUTBANK">
                                <el-input
                                    placeholder="请输入银行号"
                                    v-model="formData.OUTBANK"
                                    @input="handleInput"
                                    :disabled="isOutDis"
                                ></el-input>
                            </el-form-item>
                        </div>
                        <div class="text_center width40">
                            <el-form-item label="申请转入的银行卡银行名称:" prop="OUTBANKNAME">
                                <el-select
                                    placeholder="请选择转入银行名称"
                                    clearable
                                    v-model="formData.OUTBANKNAME"
                                    @change="handLeChange"
                                    :disabled="isOutbanknameDis"
                                >
                                    <el-option
                                        v-for="(item, index) in bankNameList"
                                        :key="index"
                                        :label="item.code"
                                        :value="item.code"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="text_center width40">
                            <el-form-item label="申请转移的银行卡类型:" prop="OUTFLAG">
                                <el-select
                                    placeholder="请选择转移的银行卡类型"
                                    clearable
                                    value-key="code"
                                    v-model="OUTFLAG_option"
                                    @change="handelOutFlagSelect"
                                >
                                    <el-option
                                        v-for="item in bankTypeList"
                                        :key="item.code"
                                        :label="item.label"
                                        :value="item"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <el-row class="buttonBox">
                            <el-button type="primary" size="small" @click="handleSubmit">修 改</el-button>
                            <el-button type="primary" size="small" @click="handleReset">重 置</el-button>
                        </el-row>
                    </el-form>

                    <!-- 修改结果展示 -->
                    <el-dialog
                        v-drag
                        title="现金分期资料修改成功"
                        width="800px"
                        center
                        :visible="isShowDialog"
                        @close="handleCloseDialog"
                        append-to-body
                        :close-on-click-modal="false"
                        custom-class="messageDialog"
                    >
                        <el-row>
                            <el-col :span="12" class="infoItem">
                                <span class="title">申请转入的银行卡号:</span>
                                <span class="info">{{ SUCCESSDATA.OUTCARDNBR }}</span>
                            </el-col>
                            <el-col :span="12" class="infoItem">
                                <span class="title">申请转入的银行卡持卡人姓名:</span>
                                <span class="info">{{ SUCCESSDATA.CALNAME }}</span>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12" class="infoItem">
                                <span class="title">申请转入的银行行号:</span>
                                <span class="info">{{ SUCCESSDATA.OUTBANK }}</span>
                            </el-col>
                            <el-col :span="12" class="infoItem">
                                <span class="title">申请转入的银行卡银行名称:</span>
                                <span class="info">{{ SUCCESSDATA.OUTBANKNAME }}</span>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12" class="infoItem">
                                <span class="title">申请转入的银行卡卡片有效日期:</span>
                                <span class="info">{{ SUCCESSDATA.OUTEXP | getFormatDate }}</span>
                            </el-col>
                            <el-col :span="12" class="infoItem">
                                <span class="title">申请转移的银行卡类型:</span>
                                <span
                                    class="info"
                                >{{ SUCCESSDATA.OUTFLAG | getTypeText(bankTypeList) }}</span>
                            </el-col>
                        </el-row>
                    </el-dialog>
                </div>
            </template>
        </cardComponent>
        <el-dialog
            v-drag
            title="现金分期资料修改"
            :visible.sync="centerDialogVisible"
            width="500px"
            :append-to-body="true"
            top="30vh"
            :close-on-click-modal="false"
            center
        >
            <p>
                卡号：
                <span>{{this.formData.CARDNO}}</span>
            </p>
            <!-- <p>
                账户类型：
                <span>{{this.CATEGORY_filter}}</span>
            </p>-->
            <p class="text_center padding_top15">
                <span style="color:#3a8ee6; ">您确认要修改当前的资料吗？</span>
            </p>
            <span slot="footer" class="dialog-footer">
                <el-button
                    size="small"
                    icon="el-icon-circle-close"
                    @click="centerDialogVisible = false"
                >取 消</el-button>
                <el-button
                    size="small"
                    type="primary"
                    @click="handleTrans"
                    icon="el-icon-circle-check"
                    v-preventReClick
                >确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import moment from 'moment';
import { getAccountTypeName, getDictSelectList, getCardInfo3004 } from '@/utils/Common';
import { RegConfig } from '@/utils/RegConfig';
import cardComponent from '@/components/cardComponent/cardComponent';

export default {
    name: 'cashInstUpdate',
    components: {
        cardComponent,
        Trialbalance,
    },

    data() {
        // 卡号校验 ==> 选择微商银行的时候
        const cardNoValidate = (rule, value, callback) => {
            if (this.formData.OUTBANK && this.formData.OUTBANK === '6440') { // 选择微商银行
                if (!RegConfig.hsbankCardNo.test(value)) { // 卡号不满足规则
                    callback(new Error('申请转入的银行卡卡号长度应为18-21位数字,请重新输入!'));
                } else {
                    callback();
                }
            } else if (!RegConfig.cardNo.test(value)) { // 卡号不满足规则
                callback(new Error('请输入正确的银行卡号!'));
            } else {
                callback();
            }
        };
        return {

            centerDialogVisible: false,//二次确认框
            pageLoading: false, // 页面loading
            isShowDialog: false, // 对话框显示控制阀    
            bankNameList: '', // 申请转入的银行卡银行名称 下拉选择列表
            newCardInfo_3004: '',//新的3004 接口数据
            bankTypeList: [{ label: '他行', code: 'C' }, { label: '本行', code: 'X' }
            ], // 申请转移的银行卡类型 下拉选择列表
            isOutDis: false,
            isOutbanknameDis: false,
            OUTFLAG_option: '',
            formData: { // 搜索表单字段
                CATEGORY: '', // 账户类别
                OUTCARDNBR: '', // 申请转入的银行卡卡号
                OUTBANK: '6440', // 申请转入的银行行号
                OUTBANKNAME: '', // 申请转入的银行名称
                OUTFLAG: '', // 申请转移的银行卡类型
            },
            paramsCardNo: '',//父页面上传 过来的卡号
            // 修改成功 - 展示信息
            SUCCESSDATA: {
                OUTCARDNBR: '', // 申请转入的银行卡卡号
                CALNAME: '', // 申请转入的银行卡持卡人姓名
                OUTBANK: '', // 申请转入的银行行号
                OUTBANKNAME: '', // 申请转入的银行卡银行名称
                OUTEXP: '', // 申请转入的银行卡卡片有效日期
                OUTFLAG: '', // 申请转移的银行卡类型
            },

            // 表单字段校验规则
            formRules: {
                OUTCARDNBR: [
                    { required: true, message: '请输入申请转入的银行卡卡号', trigger: 'blur' },
                    { validator: cardNoValidate, trigger: 'blur' },
                ],
                // CALNAME: [
                //     { required: true, message: '请输入申请转入的银行卡持卡人姓名', trigger: 'blur'}
                // ],
                OUTBANK: [
                    { required: true, message: '请输入申请转入的银行行号', trigger: 'blur' },
                ],
                OUTBANKNAME: [
                    { required: true, message: '请选择申请转入的银行名称', trigger: 'blur' },
                ],
                OUTFLAG: [
                    { required: true, message: '请选择申请转移的银行卡类型', trigger: 'blur' },
                ],
            },
        };
    },

    filters: {
        // 申请转移的银行卡类型 -> 转译
        getTypeText(val, bankTypeList) {
            let text = '';
            bankTypeList.forEach((item) => {
                if (item.code === val) {
                    text = item.label;
                }
            });
            return text;
        },

        // 日期格式化
        getFormatDate(val) {
            let date = '';
            if (val) {
                const time = `${val}`;
                date = moment(time).format('YYYY-MM-DD');
            }
            return date;
        },
        CATEGORYFitlers(val, AccountionTYPE_INFO) {
            let text = '';
            AccountionTYPE_INFO.forEach((item) => {
                if (item.code === val) {
                    text = item.label;
                }
            });
            return text;
        }
    },

    // 取缓存信息
    computed: mapState({
        cardList_3601: state => state.common.cardList_3601, // 卡列表信息
        cardInfo_3004: state => state.common.cardInfo_3004, // 默认卡信息
        defaultParams: state => state.common.defaultParams, // 接口默认参数
        pinFlag: state => state.common.pinFlag, // 是否密码检查标志
        AccountionTYPE_INFO: state => state.common.AccountionTYPE_INFO,//账户类型
    }),

    async mounted() {
        // console.log(this.cardInfo_3004,'cardInfo_3004')
        // this.formData.CALNAME = this.cardInfo_3004.NAME
        // 获取 下拉选择数据 列表
        this.getCardInfo();
        await this.getBaseData();
        this.formData.CATEGORY = this.newCardInfo_3004.CATEGORY + '';
    },
    methods: {
        getCardInfo() {
            // console.log(this.$route.params)
            console.log(" this.$route.params.cardNo", this.$route.params.cardNo);
            this.paramsCardNo = this.$route.params.cardNo;
        },
        // 获取银行下拉选择列表
        async getBaseData() {
            const cardNo = (this.cardInfo_3004.cardNo + '').trim();
            if (cardNo !== this.paramsCardNo) {
                console.log(' this.paramsCardNo', this.paramsCardNo);
                await getCardInfo3004(this.paramsCardNo, this);
            }

            // 获取账户类别
            // this.accountType = await getAccountTypeName(this.cardList_3601, this.cardInfo_3004, this);

            // // 银行选择下拉列表
            this.bankNameList = await getDictSelectList('BANKNAME', this);

            // // 银行类型 下拉选择
            // this.bankTypeList = await getDictSelectList('BANK_TYPE', this);
        },

        // 切换申请转入的银行
        handLeChange(val) {
            console.log('转入的银行', val);
            if (val) {
                this.bankNameList.forEach((item) => {
                    if (item.label === val) {
                        this.formData.OUTBANK = item.code;
                        this.$refs.editForm.validateField('OUTBANK');
                    }
                });
            }
        },

        // 输入银行号 自动带出银行名称
        handleInput(val) {
            // console.log(val, 'cal')
            if (val) {
                this.bankNameList.forEach((item) => {
                    if (item.code === val) {
                        this.formData.OUTBANKNAME = item.label;
                    } else {
                        this.formData.OUTBANKNAME = '';
                    }
                });
            } else {
                this.formData.OUTBANKNAME = '';
            }
        },

        // 提交修改
        handleSubmit() {
            this.$refs.editForm.validate((valid) => {
                if (valid) {
                    // 这块是借记卡校验
                    // this.handleVerifyCard(this.formData.OUTCARDNBR);

                    this.handleTrans();
                } else {

                }
            });
        },
        // 银行类型 选择后 修改默认值
        handelOutFlagSelect(obj) {
            console.log(obj, 'obj');
            if (obj.code === 'X') {
                this.formData.OUTBANK = '6440';
                this.formData.OUTBANKNAME = '徽商银行';
                this.formData.OUTFLAG = obj.code;
                this.isOutbanknameDis = true;
                this.isOutDis = true;
                // console.log('0311')
            } else {
                this.isOutbanknameDis = false;
                this.isOutDis = false;
            }
        },
        // 借记卡 信息比对 姓名 和卡号

        // 借记卡验证 他行不需要验证 只对本行验证
        handleVerifyCard(cardno) {
            const params = {
                cardno,
            };
            this.$post.common.verifyDebitCard(params).then((res) => {
                if (res.status === 200) {
                    console.log(res, '返回结果');
                    if (res.data.iscardbin) { // 校验通过
                        // 判断接口返回回来的信息 与当前客户信息是否一致 如果不一致 也提示： 不是本人名下借记卡
                        this.handleTrans();
                    } else { // 借记卡校验失败
                        this.$alert(res.data.msg || '借记卡校验失败，不是本人名下借记卡。', '借记卡验证提示', {
                            customClass: 'error', type: 'error',
                            showClose: false,
                        });
                    }
                }
            });
        },

        // 跑 4075 交易
        handleTrans() {
            // 设置请求参数 -- 4075 交易
            const appBody = {
                PINFLAG: this.pinFlag, // 是否检查密码标志 0-不检查
                CARDNBR: this.cardInfo_3004.CARDNO, // 卡号
                OPERTP: '0', // 0－现金贷款/余额转移申请资料修改， 1－现金贷款/余额转移申请，2－现金贷款/余额转移当日撤销，3—现金贷款/余额转移试算
                OUTCARDNBR: this.formData.OUTCARDNBR, // 申请转入的银行卡卡号
                OUTBANKNAME: this.formData.OUTBANKNAME, // 申请转入的银行卡银行名称
                OUTFLAG: this.formData.OUTFLAG, // 申请转移的银行卡类型
                OUTBANK: this.formData.OUTBANK, // 申请转入的银行卡银行行号
                // OUTCARDNBR: this.formData.OUTCARDNBR, // 申请转入的银行卡卡号
                OUTEXP: '0000', // 申请转入的银行卡卡片有效期
                CREDNO: '0000', // 信用计划编号
                MPDRTYN: '0', // 强制通过 0:非强制通过 1:强制通过
                BTYPE: '0', // 业务类型 0:对私 1:对公
            };
            const params = JSON.parse(JSON.stringify(this.defaultParams));
            // console.log(this.defaultParams, 'this.defaultParams')
            params.body.appHead.tranCode = '4075';
            params.body.appBody = appBody;

            // 跑 4075 交易
            this.$post.common.transPort(params).then((res) => {
                this.pageLoading = false;
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    console.log(result, 'result -- 4075');
                    if (result.sysHead.rspCd === '000000') {
                        for (const key in this.SUCCESSDATA) {
                            this.SUCCESSDATA[key] = result.body.appBody[key];
                        }
                        this.isShowDialog = true;
                    } else {
                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                        this.$alert(errorMsg, result.sysHead.rspDesc, {
                            customClass: 'error', type: 'error',
                        });
                    }
                } else {
                    this.$message.error('请求失败');
                }
            });
        },


        // 点击重置搜索表单
        handleReset() {
            this.$refs.editForm.resetFields();
        },

        // 点击关闭对话空框
        handleCloseDialog() {
            this.isShowDialog = false;
        },

        // 切换分页大小
        handleChangeSize(val) {
            this.pageSize = val;
            this.currentPage = 1;
        },

        // 切换页码
        hanleChangeCurrentPage(val) {
            this.currentPage = val;
        },
    },
};
</script>
<style rel="stylesheet/scss" lang="scss">
.cashInstUpdate {
    .editForm {
        .el-form-item__content {
            text-align: left;

            .el-select,
            .el-input,
            .el-date-editor {
                width: 100%;
                max-width: 400px;
            }
        }
    }
}
</style>
<style scoped lang="scss">
.cashInstUpdate {
    min-height: 100%;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;

    .buttonBox {
        margin: 50px 0 0 0;
        text-align: center;
    }
}

.messageDialog {
    .el-row {
        margin-bottom: 30px;

        .infoItem {
            .title {
                font-weight: 600;
                padding-right: 10px;
            }

            .info {
                color: #999;
            }
        }
    }
}
</style>
